import React from 'react'
import { Card, Button, Toast, NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import type { RootState } from '../../store/types'
import PermissionGuard from '../../components/PermissionGuard'
import { PERMISSION_OPERATIONS, getUserRole } from '../../utils/permission'
import './index.css'

/**
 * 权限测试页面
 * 用于测试不同用户的权限和功能
 */
function PermissionTest() {
  const navigate = useNavigate()
  const userEmail = useSelector((state: RootState) => state.info.email)
  const userRole = userEmail ? getUserRole(userEmail) : 'unknown'

  const handleBack = () => {
    navigate(-1)
  }

  const testPermission = (operation: string) => {
    Toast.show(`测试权限: ${operation}`)
  }

  return (
    <div className="permission-test-container">
      <NavBar onBack={handleBack}>权限测试</NavBar>
      
      <div className="test-content">
        {/* 用户信息卡片 */}
        <Card style={{ margin: '16px' }}>
          <div className="user-info">
            <h3>当前用户信息</h3>
            <p><strong>邮箱:</strong> {userEmail || '未登录'}</p>
            <p><strong>角色:</strong> {userRole}</p>
          </div>
        </Card>

        {/* 权限测试卡片 */}
        <Card style={{ margin: '16px' }}>
          <div className="permission-tests">
            <h3>权限功能测试</h3>
            
            {/* 评论权限测试 */}
            <div className="test-item">
              <h4>评论功能</h4>
              <PermissionGuard operation={PERMISSION_OPERATIONS.COMMENT}>
                <Button 
                  color="primary" 
                  size="small"
                  onClick={() => testPermission('comment')}
                >
                  发表评论
                </Button>
              </PermissionGuard>
            </div>

            {/* 点赞权限测试 */}
            <div className="test-item">
              <h4>点赞功能</h4>
              <PermissionGuard operation={PERMISSION_OPERATIONS.LIKE}>
                <Button 
                  color="primary" 
                  size="small"
                  onClick={() => testPermission('like')}
                >
                  点赞
                </Button>
              </PermissionGuard>
            </div>

            {/* 关注权限测试 */}
            <div className="test-item">
              <h4>关注功能</h4>
              <PermissionGuard operation={PERMISSION_OPERATIONS.FOLLOW}>
                <Button 
                  color="primary" 
                  size="small"
                  onClick={() => testPermission('follow')}
                >
                  关注用户
                </Button>
              </PermissionGuard>
            </div>

            {/* 发布权限测试 */}
            <div className="test-item">
              <h4>发布功能</h4>
              <PermissionGuard operation={PERMISSION_OPERATIONS.PUBLISH}>
                <Button 
                  color="primary" 
                  size="small"
                  onClick={() => testPermission('publish')}
                >
                  发布内容
                </Button>
              </PermissionGuard>
            </div>

            {/* 在线咨询权限测试 */}
            <div className="test-item">
              <h4>在线咨询</h4>
              <PermissionGuard operation={PERMISSION_OPERATIONS.CONSULTATION}>
                <Button 
                  color="primary" 
                  size="small"
                  onClick={() => testPermission('consultation')}
                >
                  在线咨询
                </Button>
              </PermissionGuard>
            </div>
          </div>
        </Card>

        {/* 说明卡片 */}
        <Card style={{ margin: '16px' }}>
          <div className="permission-info">
            <h3>权限说明</h3>
            <ul>
              <li><strong>管理员账号 (1463361202@qq.com):</strong> 拥有所有权限</li>
              <li><strong>普通用户账号 (3183936985@qq.com):</strong> 只能查看基础页面，无法评论、点赞、关注、发布等</li>
              <li><strong>未登录用户:</strong> 只能查看公开页面</li>
            </ul>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default PermissionTest
